<template>
    <el-card class="tagList search-box clearfix">
        <template v-if="tagList.length>0">
            <el-tag
                v-for="item in tagList"
                :key="item.id"
                :color="item.color"
                effect="plain"
                @click="goArticleList(item.id)"
            >{{ item.name }}</el-tag>
        </template>

        <el-row v-else>
            <i class="el-icon-price-tag"></i>
            <span>标签不存在</span>
        </el-row>
    </el-card>
</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
        name: "tagList",
        computed: {
            ...mapGetters({
                tagList:'article/getTagList',
            })
        },
        methods: {
            goArticleList(tagId){
                this.$router.push(`/article/${tagId}`)
            },
        },
    }
</script>

<style scoped lang="less">
    .tagList{
        width: 100%;
        padding-bottom: 10px;

        .el-tag{
            margin: 0 8px 8px 0;
            cursor: pointer;
            float: left;
            color:#fff;
        }
    }
</style>